<template>
  <div class="resource-viewer">
    <!-- 顶部信息盒子 -->
    <div class="header-box">
      <!-- 返回按钮 -->
      <el-button class="back-button" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
      </el-button>

      <!-- 标题 & 上传时间 -->
      <div class="resource-info">
        <h2 class="resource-title">{{ resourceName || "未知资源" }}</h2>
        <p class="upload-time">上传时间：{{ uploadTime || "未知时间" }}</p>
      </div>
    </div>

    <!-- 内容盒子 -->
    <div class="resource-content">
      <!-- 加载动画 -->
      <div v-if="isLoading" class="loading-container">
        <el-icon class="loading-icon"><Loading /></el-icon>
        <p style="color: white;">资源加载中...</p>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="errorMessage" class="error-container">
        <el-alert :title="errorMessage" type="error" show-icon />
      </div>

      <!-- 资源展示区 -->
      <template v-else>
        <!-- 视频 -->
        <div 
          v-if="type === 'video'" 
          class="video-wrapper" 
          @mouseenter="handleMouseEnter" 
          @mouseleave="handleMouseLeave"
        >
          <!-- 视频播放器 -->
          <video 
            ref="videoPlayer"
            :src="fullUrl" 
            controls
            class="video-player"
            @play="isPlaying = true"
            @pause="isPlaying = false"
            @error="errorMessage = '视频加载失败'"
          ></video>

          <!-- 悬停/暂停时显示灰色播放图标 -->
          <div 
            v-if="showPlayIcon" 
            class="play-icon"
            @click="togglePlay"
          >
            <el-icon v-if="!isPlaying" :size="90" color="gray">
              <VideoPlay />
            </el-icon>
            <el-icon v-else :size="90" color="gray">
              <VideoPause />
            </el-icon>
          </div>
        </div>

        <!-- 图片 -->
        <img 
          v-else-if="type === 'image'" 
          :src="fullUrl" 
          alt="查看图片" 
          class="image-viewer"
          @error="errorMessage = '图片加载失败'">
        
        <!-- 文档 & PPT -->
        <iframe 
          v-else-if="['document', 'ppt'].includes(type)" 
          :src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fullUrl)}`"
          class="doc-viewer"
          @error="errorMessage = '文档加载失败'">
        </iframe>

        <!-- 不支持的格式 -->
        <div v-else class="unsupported">
          <el-alert title="暂不支持该格式的预览" type="warning" show-icon />
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ArrowLeft, Loading, VideoPlay, VideoPause } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();
const isLoading = ref(true);
const errorMessage = ref('');
const showPlayIcon = ref(true);
const isPlaying = ref(false);
const videoPlayer = ref(null);

// 资源信息
const type = computed(() => route.query.type);
const resourceName = computed(() => route.query.name);
const uploadTime = computed(() => route.query.uploadTime);

// 资源 URL 处理
const fullUrl = computed(() => {
  if (!route.query.url) return null;
  return route.query.url.startsWith('http') ? route.query.url : `http://113.45.144.121:1999${route.query.url}`;
});

onMounted(() => {
  console.log("资源 URL:", fullUrl.value);
  if (!fullUrl.value) {
    errorMessage.value = "资源路径无效";
    isLoading.value = false;
    return;
  }

  isLoading.value = true;
  errorMessage.value = '';

  setTimeout(() => {
    isLoading.value = false;
  }, 1000);
});

// 返回上一页
const goBack = () => {
  router.back();
};

// 处理鼠标进入
const handleMouseEnter = () => {
  showPlayIcon.value = true;
};

// 处理鼠标离开
const handleMouseLeave = () => {
  if (isPlaying.value) {
    showPlayIcon.value = false;
  }
};

// 切换播放/暂停
const togglePlay = () => {
  if (videoPlayer.value) {
    if (isPlaying.value) {
      videoPlayer.value.pause();
    } else {
      videoPlayer.value.play();
    }
  }
};
</script>

<style scoped>
/* 页面整体 */
.resource-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 90vh;
  background: #f4f5f7;
  overflow-x: hidden;
}

/* 顶部信息盒子 */
.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  background: white;
  padding: 20px;
}

/* 返回按钮 */
.back-button {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 标题 & 时间 */
.resource-info {
  text-align: center;
  flex-grow: 1;
}

.resource-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.upload-time {
  font-size: 14px;
  color: #666;
}

/* 资源展示盒子 */
.resource-content {
  width: 100%;
  height: calc(100% - 60px);
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(31, 31, 31);
  overflow: hidden;
}

/* 加载动画 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-icon {
  font-size: 40px;
  animation: rotate 2s linear infinite;
  color: white;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 视频盒子 */
.video-wrapper {
  position: relative;
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* 视频播放器 */
.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: black;
}

/* 悬停播放/暂停按钮 */
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

/* 图片查看 */
.image-viewer {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  object-fit: contain;
}

/* 文档查看 */
.doc-viewer {
  width: 100%;
  height: 100%;
  border: none;
}

/* 不支持的格式 */
.unsupported {
  text-align: center;
  font-size: 18px;
  color: #666;
}
</style>
